<template>
	<el-main>
		<el-card shadow="never" header="分步表单">
			<el-steps :active="active" align-center style="margin-bottom: 20px">
				<el-step title="填写转账信息"></el-step>
				<el-step title="确认转账信息"></el-step>
				<el-step title="完成"></el-step>
			</el-steps>
			<el-row>
				<el-col :lg="{ span: 8, offset: 8 }">
					<el-form
						v-if="active == 0"
						ref="stepForm_0"
						:model="form"
						:rules="rules"
						label-position="top"
					>
						<el-form-item label="付款账户" prop="paymentAccount">
							<el-select v-model="form.paymentAccount" clearable>
								<el-option
									label="sakuya@scui.com"
									value="sakuya@scui.com"
								></el-option>
								<el-option
									label="lolicode@scui.com"
									value="lolicode@scui.com"
								></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="收款账户" prop="collectionAccount">
							<el-input
								v-model="form.collectionAccount"
								clearable
							></el-input>
						</el-form-item>
						<el-form-item label="收款人姓名" prop="collectionName">
							<el-input
								v-model="form.collectionName"
								clearable
							></el-input>
						</el-form-item>
						<el-form-item label="转账金额" prop="amount">
							<el-input v-model="form.amount"></el-input>
						</el-form-item>
					</el-form>
					<el-form
						v-if="active == 1"
						ref="stepForm_1"
						:model="form"
						:rules="rules"
						label-position="top"
					>
						<el-alert
							title="确认转账后，资金将直接打入对方账户，无法退回。"
							type="warning"
							show-icon
							style="margin-bottom: 15px"
						/>
						<el-descriptions :column="1" border>
							<el-descriptions-item label="付款账户">{{
								form.paymentAccount
							}}</el-descriptions-item>
							<el-descriptions-item label="收款账户">{{
								form.collectionAccount
							}}</el-descriptions-item>
							<el-descriptions-item label="收款人姓名">{{
								form.collectionName
							}}</el-descriptions-item>
							<el-descriptions-item label="转账金额"
								>{{ form.amount }} 元</el-descriptions-item
							>
						</el-descriptions>
						<el-divider></el-divider>
						<el-form-item label="支付密码" prop="payPassword">
							<el-input
								v-model="form.payPassword"
								show-password
								placeholder="请输入"
							></el-input>
						</el-form-item>
					</el-form>
					<div v-if="active == 2">
						<el-result
							icon="success"
							title="操作成功"
							sub-title="预计两小时内到账"
						>
							<template #extra>
								<el-button type="primary" @click="again"
									>再转一笔</el-button
								>
								<el-button>查看账单</el-button>
							</template>
						</el-result>
					</div>
					<el-button
						v-if="active > 0 && active < 2"
						@click="pre"
						:disabled="submitLoading"
						>上一步</el-button
					>
					<el-button v-if="active < 1" type="primary" @click="next"
						>下一步</el-button
					>
					<el-button
						v-if="active == 1"
						type="primary"
						@click="submit"
						:loading="submitLoading"
						>提交</el-button
					>
				</el-col>
			</el-row>
		</el-card>
	</el-main>
</template>

<script>
export default {
	name: "stepform",
	data() {
		return {
			active: 1,
			submitLoading: false,
			form: {
				paymentAccount: "lolicode@scui.com",
				collectionAccount: "test@example.com",
				collectionName: "Lolowan",
				amount: "100",
				payPassword: "",
			},
			rules: {
				paymentAccount: [
					{
						required: true,
						message: "请选择付款账户",
					},
				],
				collectionAccount: [
					{
						required: true,
						message: "请输入收款账户",
					},
				],
				collectionName: [
					{
						required: true,
						message: "请输入收款人姓名",
					},
				],
				amount: [
					{
						required: true,
						message: "请输入转账金额",
					},
				],
				payPassword: [
					{
						required: true,
						message: "需要支付密码才能进行支付",
					},
				],
			},
		};
	},
	mounted() {},
	methods: {
		//下一步
		next() {
			const formName = `stepForm_${this.active}`;
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.active += 1;
				} else {
					return false;
				}
			});
		},
		//上一步
		pre() {
			this.active -= 1;
		},
		//提交
		submit() {
			const formName = `stepForm_${this.active}`;
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.submitLoading = true;
					setTimeout(() => {
						this.submitLoading = false;
						this.active += 1;
					}, 1000);
				} else {
					return false;
				}
			});
		},
		//再来一次
		again() {
			this.active = 0;
		},
	},
};
</script>

<style scoped>
.el-steps:deep(.is-finish) .el-step__line {
	background: var(--el-color-primary);
}
</style>
